<template>
	<view class="order-page" :style="{height:screenHeight+'px'}">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar textContent="我的收藏" isBackShow=""></free-nav-bar>
		<!-- #endif -->
		<view class="order-head" id="head">			
		</view>
		<view class="order-body" :style="{height: scrollerHeight + 'px'}">
			<scroll-view class="scroll-box-y" :scroll-y="true" :scroll-with-animation="true"
				@scrolltoupper="upper"
				@scrolltolower="lower"
				@scroll="scroll"
				@refresherrefresh="onRefresh"
				:refresher-triggered="reTriggered"
				:refresher-enabled="true"
				:refresher-threshold="45"
				:scroll-into-view="scrollIntoXView" :style="{height: scrollerHeight + 'px'}">
				<view class="order-list">
					<template v-if="collectList && collectList.length > 0">
						<uni-list style="background-color: #F3F3F3;" >
							<uni-list-item style="height: 360rpx;margin-bottom: 10rpx;background-color: #F3F3F3;" v-for="(item,index) in collectList" :key="item.id">
								<template v-slot:header>
									<view class="item-head">										
										<view class="item-title"><span>{{item.orchardName}}</span></view>
										<view class="item-status">
																					
										</view>
									</view>
								</template>
								<!-- 自定义 body -->
								<template v-slot:body>
									<view class="item-body">										
										<view class="item-desc" @click="goToProductDetail(item.productId)">
											<view class="spu-img">
												<image style="width: 100%; height: 100%;" 
												 :src="item.productImage" ></image>
											</view>
											<view class="item-detail">
												<view class="spu-title">{{item.productName}}</view>												
											</view>											
										</view>
									</view>									
								</template>
								<!-- 自定义 footer-->
								<template v-slot:footer>
									<view class="item-footer">
										<view class="order-btn" @click="removeCollect(item.id)"> <span>取消收藏</span></view>																		
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</template>
					<template v-else>
						<view style="display: block;width: 100%; height: 100rpx;text-align: center;padding: 20rpx;">暂无收藏</view>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	
	export default {
		components:{
			freeNavBar
		},
		onLoad(e) {			
			this.getList();
		},
		onShow() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight//获取当前页面的高度			
		},
		onReady() {
			var height
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					_this.$nextTick(() => {
						let view = uni.createSelectorQuery().select("#head"); //局部滑块
						view.boundingClientRect(data => {
							_this.topHeight = data.height;
							height = _this.phoneHeight - _this.topHeight -30;	
							_this.scrollerHeight = height;
						}).exec();
					})
				},
			}); 			
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				scrollTop: 0,
				screenHeight: 950,
				scrollIntoXView: '',
				collectList: [],
				queryForm: {
					pageNo: 1,
					pageSize: 10
				},
				reTriggered: true
			}
		},
		methods: {
			goToProductDetail(id) {
				uni.navigateTo({url: '../../pages/index/product-detail?pid=' + id});
			},
			removeCollect(id) {
				if(id) {
					let _this = this;
					uni.showModal({
						title: '提示',
						content: '确认取消收藏？',
						success: function (res) {
							if (res.confirm) {
								$H.post('/member/like/removeCollect', {id}).then(res => {
									if(res) {
										_this.getList();
									}
								})
							} else if (res.cancel) {
								return;
							}
						}
					});						
				}
			},
			getList() {
				let _this = this
				let params = {
					pageNo: _this.queryForm.pageNo,
					pageSize: _this.queryForm.pageSize,
				};
				$H.get('/member/like/myCollectList', params).then(res => {
					if(res && res.list) {
						_this.collectList = res.list
					}
				})
			},
			getYuanPrice(price) {
				return $U.fenToYuan(price);
			},
			isBlank(str) {
				if(str == 'null' || str == 'NULL' || str == 'undefined') {
					return true;
				}
				else if(str == 0) {
					return false;
				}
			    return (!str || /^\s*$/.test(str));
			},

			upper() {
				
			},
			lower() {
				this.queryForm.pageNo += 1
				let params = {
					pageNo: this.queryForm.pageNo,
					pageSize: this.queryForm.pageSize,
				};
				$H.get('/member/like/myCollectList', params).then(res => {
					if(res && res.list) {
						if(res.list.length > 0) {
							this.collectList.push(...res.list)
						}
						else {
							this.queryForm.pageNo -= 1
							uni.showToast({
								title: '已无更多数据',
								icon: 'none'
							});
						}
					}
				})
			},
			scroll() {

			},
			onRefresh() {
				this.reTriggered = true
				let params = {
					pageNo: 1,
					pageSize: this.queryForm.pageSize,
				};
				this.queryForm.pageNo = 1
				$H.get('/member/like/myCollectList', params).then(res => {
					if(res && res.list) {
						this.collectList = res.list
					}
					this.reTriggered = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.order-page {
	position: relative;
	float: left;
	width: 100%;
	.order-head {
		background: #FFFFFF;
		padding: 0 20rpx;
		padding-top: 14rpx;
		.search {
			height: 60rpx;
			border-radius: 200px;
			background: #F3F3F3;
			justify-content: space-between;
			padding-left: 30rpx;
			
			.search-input {
				padding: 12rpx 0;
				align-items: center;
				flex: 1;
				padding-right: 10rpx;
			}
			
			.search-icon {
				display: block;
				margin-right: 14rpx;
			}
			
			.input {
				display: block;
				width: 100%;
			}
			.search-btns {
				width: 112rpx;
				align-items: center;
				justify-content: center;
				border-left: 1px solid #E6E6E6;
				color: #FD5052;
			}
		}
		.order-tabs {
			position: relative;
			padding-top: 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			/deep/ .v-tabs__container-item {
				width: auto;
				min-width: 14%;
				justify-content: center !important;
			}
		}
	}
	.order-body {
		position: relative;
		width: 100%;
		height: 950rpx;
		background-color: #F3F3F3;
		.scroll-box-y {
			width: 100%;
			height: 950rpx;
			position: relative;
			box-sizing: border-box;			
			white-space: nowrap;
			padding-top: 12rpx;
			.order-list {	
				position: relative;
				height: 950rpx;
				width: 100%;
				float: left;
				align-items: center;
				justify-content: flex-start;
				/deep/ .uni-list {
					background-color: #F3F3F3;					
				}
				/deep/ .uni-list-item {
					height: 350rpx;
				}
				/deep/ .uni-list-item .uni-list-item__container {
					height: 280rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					display: block;
				}
				.item-head {
					position: relative;
					width: 100%;
					height: 80rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: center;
					box-sizing: border-box;
					.item-title {
						position: relative;
						width: 75%;
						float: left;
						text-align: left;
						color: #222222;
						font-weight: 400;
						font-size: 36rpx;
						font-style: normal;
						text-transform: none;
						overflow: hidden; 
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.item-status {
						position: relative;
						width: 24%;
						float: left;
						text-align: right;
						font-weight: 400;
						font-size: 26rpx;
						font-style: normal;
						text-transform: none;
					}
				}
				.item-body {
					position: relative;
					width: 100%;
					height: 140rpx;
					.item-iamges {
						position: relative;
						width: 100%;
						display: flex;
						box-sizing: border-box;
						overflow: hidden;
						.item-img-box {
							width: 560rpx;
							height: 140rpx;
							.spu-img-not-pay {
								width: 140rpx;
								height: 140rpx;
								float: left;
								background: #A55454;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
							}
						}
						.item-price-not-pay {
							position: relative;
							width: 100rpx;
							height: 160rpx;
							float: right;
							font-weight: bold;
							font-size: 34rpx;
							color: #000000;
							line-height: 100rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
					.item-desc {
						position: relative;
						width: 100%;
						display: flex;
						.spu-img {
							position: relative;
							width: 140rpx;
							height: 140rpx;
							float: left;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
						.item-detail {
							position: relative;
							width: 440rpx;
							height: 140rpx;
							.spu-title {
								position: relative;
								width: 100%;
								height: 70rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								padding: 20rpx;
							}
							.spu-sku {
								position: relative;
								width: 100%;
								height: 70rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;	
								font-style: normal;
								text-transform: none;
							}
						}
						.item-price {
							position: relative;
							width: 100rpx;
							height: 160rpx;
							float: left;
							font-weight: bold;
							font-size: 34rpx;
							color: #000000;
							line-height: 100rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
				}
				.item-footer {
					position: relative;
					width: 100%;
					height: 70rpx;
					.order-btn {
						position: relative;
						width: 20%;
						height: 50rpx;
						line-height: 50rpx;
						float: right;
						top: 10rpx;
						text-align: center;
						border: 1rpx solid;
						border-radius: 25rpx;
						margin: 0 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
}
</style>
